import React from 'react';
import { useIntl, FormattedMessage, connect, Link } from 'umi';
import { PageContainer } from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import { Button } from 'antd';
import DescriptionDrawer from '@/pages/item/MyItemList/components/DescriptionDrawer';
import ProCard from '@ant-design/pro-card';
import { searchAuthTradeList, searchSaleTradeList } from '@/services/trade/trade';
import { searchItemList } from '@/services/item/item';
import moment from 'moment';
import { StatisticCard } from '@ant-design/pro-card';
import { Radio,Input,Space,Image,Card} from 'antd';
import { MoneyCollectOutlined ,AlipayCircleOutlined } from '@ant-design/icons';


import RcResizeObserver from 'rc-resize-observer';

const Mycount = (props) => {
  const [value, setValue] = React.useState(1);
  console.log(props);
  const onChange = e => {
    console.log('radio checked', e.target.value);
    setValue(e.target.value);
  };
  const { dispatch, currentUser, tab } = props;
  const imgStyle = {
    display: 'block',
    width: 42,
    height: 42,
  };


  return(
    <PageContainer>
      <ProCard
        tabs={{
          tabPosition: 'top',
          activeKey: tab,}}
        >
        <ProCard.TabPane key="tab1" tab="账户详情">
          <ProCard  bordered headerBordered>
            <ProCard  colSpan="50%">




              <StatisticCard.Group direction={ 'column'}>


                <StatisticCard statistic={{
                  title: '账户名称：',
                  value: "gan",


                }}/>

                <StatisticCard statistic={{
                  title: '当前可用余额：',
                  value: 100,
                  icon: (<img style={imgStyle} src="https://gw.alipayobjects.com/mdn/rms_7bc6d8/afts/img/A*dr_0RKvVzVwAAAAAAAAAAABkARQnAQ" alt="icon"/>),

                }}/>


              </StatisticCard.Group>

              <Space direction="vertical"  size={'large'}>

              <Radio.Group defaultValue="a" size="large" onChange={onChange}>
                <Space size={'middle'}>
                <Radio.Button value="a" >微信</Radio.Button>
                <Radio.Button value="b"  >支付宝</Radio.Button>
                <Radio.Button value="c">银行卡</Radio.Button>
                </Space>
              </Radio.Group>
                <Card title="充值金额："  bordered={false} style={{ width: 300 }}>
                  <Input placeholder="请输入" />

                </Card>


             <div><Button
               shape="round"
               icon={<MoneyCollectOutlined />}>确认充值</Button></div>

              </Space>

            </ProCard>



            <ProCard >
              <div>
                <Image
                  width={500}
                  preview={false}
                  src="http://img95.699pic.com/photo/50052/5096.jpg_wh300.jpg"/>
              </div>
              <div >
                <Card title="温馨提示" bordered={false} style={{ width: 300 }}>
                  <p>1.目前只接受支付宝，微信和银行卡账户支付充值，充值情况可能会稍有延迟，请耐心等待</p>
                  <p>2.系统目前暂不支持提现功能</p>

                </Card>
              </div>
            </ProCard>
          </ProCard>
        </ProCard.TabPane>
        <ProCard.TabPane key="tab2" tab="充值记录">
            <ProTable>

            </ProTable>
        </ProCard.TabPane>
        <ProCard.TabPane key="tab3" tab="交易记录">
          <ProTable>

          </ProTable>
        </ProCard.TabPane>
      </ProCard>





    </PageContainer>



  );




}
export default Mycount;
